
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="边框设置" class="dialog-container" width="750px" append-to-body @opened="dialogOpened">
    <el-form ref="form" :model="cellStyle" label-width="120px">
      <el-form-item label="操作方式：">
        <el-radio v-model="operationType" label="all">单独设置</el-radio>
        <el-radio v-model="operationType" label="four">四边一体</el-radio>
      </el-form-item>
      <el-form-item :label="operationType==='all'?'上边框：':'四边一体：'">
        <div class="border-box">
          <span>线型：</span>
          <el-select v-model="cellStyle.topBorder.style" placeholder="请选择线型" class="w-120">
            <el-option v-for="(item, index) in propertyHelper.lineTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span class="margin-left-10">尺寸：</span>
          <el-select v-model="cellStyle.topBorder.width" placeholder="请选择尺寸" class="w-120">
            <el-option label="" :value="null"></el-option>
            <el-option v-for="(item, index) in 10" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <span class="margin-left-10">颜色：</span>
          <el-color-picker v-model="cellStyle.topBorder.color" show-alpha size="mini" :predefine="toolHelper.predefineColors" title="边框颜色"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item v-if="operationType==='all'" label="下边框：">
        <div class="border-box">
          <span>线型：</span>
          <el-select v-model="cellStyle.bottomBorder.style" placeholder="请选择线型" class="w-120">
            <el-option v-for="(item, index) in propertyHelper.lineTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span class="margin-left-10">尺寸：</span>
          <el-select v-model="cellStyle.bottomBorder.width" placeholder="请选择尺寸" class="w-120">
            <el-option label="" :value="null"></el-option>
            <el-option v-for="(item, index) in 10" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <span class="margin-left-10">颜色：</span>
          <el-color-picker v-model="cellStyle.bottomBorder.color" show-alpha size="mini" :predefine="toolHelper.predefineColors" title="边框颜色"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item v-if="operationType==='all'" label="左边框：">
        <div class="border-box">
          <span>线型：</span>
          <el-select v-model="cellStyle.leftBorder.style" placeholder="请选择线型" class="w-120">
            <el-option v-for="(item, index) in propertyHelper.lineTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span class="margin-left-10">尺寸：</span>
          <el-select v-model="cellStyle.leftBorder.width" placeholder="请选择尺寸" class="w-120">
            <el-option label="" :value="null"></el-option>
            <el-option v-for="(item, index) in 10" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <span class="margin-left-10">颜色：</span>
          <el-color-picker v-model="cellStyle.leftBorder.color" show-alpha size="mini" :predefine="toolHelper.predefineColors" title="边框颜色"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item v-if="operationType==='all'" label="右边框：">
        <div class="border-box">
          <span>线型：</span>
          <el-select v-model="cellStyle.rightBorder.style" placeholder="请选择线型" class="w-120">
            <el-option v-for="(item, index) in propertyHelper.lineTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span class="margin-left-10">尺寸：</span>
          <el-select v-model="cellStyle.rightBorder.width" placeholder="请选择尺寸" class="w-120">
            <el-option label="" :value="null"></el-option>
            <el-option v-for="(item, index) in 10" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <span class="margin-left-10">颜色：</span>
          <el-color-picker v-model="cellStyle.rightBorder.color" show-alpha size="mini" :predefine="toolHelper.predefineColors" title="边框颜色"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item label="自定义样式：">
        <el-input v-model="cellStyle.customStyles" type="textarea" :rows="2" placeholder="请输入自定义样式"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import propertyHelper from "./propertyHelper.js";
import toolHelper from "../tools/toolHelper.js";

export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isLoading: false,
      datasource: null,
      operationType: "all",
      cellStyle: {
        leftBorder: {
          width: 1,
          color: "0,0,0",
          style: "solid"
        },
        rightBorder: {
          width: 1,
          color: "0,0,0",
          style: "solid"
        },
        topBorder: {
          width: 1,
          color: "0,0,0",
          style: "solid"
        },
        bottomBorder: {
          width: 1,
          color: "0,0,0",
          style: "solid"
        },
        customStyles: null
      },
      propertyHelper,
      toolHelper
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  mounted () {},
  methods: {
    // 打开时
    dialogOpened () {
      const { cellDef } = this.designer;
      this.cellStyle.leftBorder = cellDef.cellStyle.leftBorder || { width: null, color: null, style: "none" };
      this.cellStyle.rightBorder = cellDef.cellStyle.rightBorder || { width: null, color: null, style: "none" };
      this.cellStyle.topBorder = cellDef.cellStyle.topBorder || { width: null, color: null, style: "none" };
      this.cellStyle.bottomBorder = cellDef.cellStyle.bottomBorder || { width: null, color: null, style: "none" };

      const leftBorder = this.cellStyle.leftBorder;
      if (leftBorder.color) {
        leftBorder.color = leftBorder.color.indexOf("rgb") >= 0 ? leftBorder.color : "rgb(" + leftBorder.color + ")";
      } else {
        leftBorder.color = null;
      }

      const rightBorder = this.cellStyle.rightBorder;
      if (rightBorder.color) {
        rightBorder.color = rightBorder.color.indexOf("rgb") >= 0 ? rightBorder.color : "rgb(" + rightBorder.color + ")";
      } else {
        rightBorder.color = null;
      }

      const topBorder = this.cellStyle.topBorder;
      if (topBorder.color) {
        topBorder.color = topBorder.color.indexOf("rgb") >= 0 ? topBorder.color : "rgb(" + topBorder.color + ")";
      } else {
        topBorder.color = null;
      }

      const bottomBorder = this.cellStyle.bottomBorder;
      if (bottomBorder.color) {
        bottomBorder.color = bottomBorder.color.indexOf("rgb") >= 0 ? bottomBorder.color : "rgb(" + bottomBorder.color + ")";
      } else {
        bottomBorder.color = null;
      }

      const customStyles = this.cellStyle.customStyles;
      if (customStyles) {
        this.cellStyle.customStyles = cellDef.cellStyle.customStyles;
      } else {
        this.cellStyle.customStyles = null;
      }
    },
    // 确认
    confirm () {
      const { cellDef, context } = this.designer;
      const leftBorder = this.cellStyle.leftBorder;
      cellDef.cellStyle.leftBorder = leftBorder.width && leftBorder.color ? leftBorder : null;

      if (this.operationType === "all") {
        // 四边独立设置
        cellDef.cellStyle.rightBorder = this.cellStyle.rightBorder.width && this.cellStyle.rightBorder.color ? this.cellStyle.rightBorder : null;
        cellDef.cellStyle.topBorder = this.cellStyle.topBorder.width && this.cellStyle.topBorder.color ? this.cellStyle.topBorder : null;
        cellDef.cellStyle.bottomBorder = this.cellStyle.bottomBorder.width && this.cellStyle.bottomBorder.color ? this.cellStyle.bottomBorder : null;
      } else {
        // 四边设置成一样
        cellDef.cellStyle.rightBorder = leftBorder.width && leftBorder.color ? leftBorder : null;
        cellDef.cellStyle.topBorder = leftBorder.width && leftBorder.color ? leftBorder : null;
        cellDef.cellStyle.bottomBorder = leftBorder.width && leftBorder.color ? leftBorder : null;
      }
      if (this.cellStyle.customStyles) {
        cellDef.cellStyle.customStyles = this.cellStyle.customStyles;
      }
      this.currentDialogVisible = false;
      context.hot.render();
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 0;
  .border-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
